<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Finance Chart (2)</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Finance Chart (2)</p>
<hr class="separator">
<div class="content">
<img src="images/finance2.png" width='640' height='457'>
<br><br>
This example demonstrate creating a full-featured finance chart, with candlesticks, moving averages, Donchian channel, volume bars, MACD and Stochastic indicators.<br><br>
This example employs the <a href="FinanceChart.htm">FinanceChart</a> library add-on to allow complex financial charts to be composed easily. In this example, the key steps are:<br><br>
<ul><li> Create a new <a href="FinanceChart.htm">FinanceChart</a> object<br><br>
<li> Set data into the chart using <a href="FinanceChart.setData.htm">FinanceChart.setData</a><br><br>
<li> Add a Slow Stochastic indicator chart as the top chart using <a href="FinanceChart.addSlowStochastic.htm">FinanceChart.addSlowStochastic</a><br><br>
<li> Add the main chart using <a href="FinanceChart.addMainChart.htm">FinanceChart.addMainChart</a><br><br>
<li> Add simple moving average lines to the main chart using <a href="FinanceChart.addSimpleMovingAvg.htm">FinanceChart.addSimpleMovingAvg</a><br><br>
<li> Add candlestick symbols to the main chart using <a href="FinanceChart.addCandleStick.htm">FinanceChart.addCandleStick</a><br><br>
<li> Add Donchian Channel to the main chart using <a href="FinanceChart.addDonchianChannel.htm">FinanceChart.addDonchianChannel</a><br><br>
<li> Add volume bars to the main chart using <a href="FinanceChart.addVolBars.htm">FinanceChart.addVolBars</a><br><br>
<li> Add an additional MACD indicator chart using <a href="FinanceChart.addMACD.htm">FinanceChart.addMACD</a></ul>
For simplicity and to allow this example to run without connecting to a real database, a <a href="RanTable.htm">RanTable</a> object is used to simulate the data. <a href="RanTable.htm">RanTable</a> is a ChartDirector utility class used for creating tables with random numbers.
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/finance2.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// Create a finance chart demo containing 100 days of data
int noOfDays = 100;

// To compute moving averages starting from the first day, we need to get extra data points before
// the first day
int extraDays = 30;

// In this exammple, we use a random number generator utility to simulate the data. We set up the
// random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as the seed.
RanTable rantable = new RanTable(9, 6, noOfDays + extraDays);

// Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row representing one
// day, and counting week days only (jump over Sat and Sun)
rantable.setDateCol(0, new GregorianCalendar(2002, 8, 4).getTime(), 86400, true);

// Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open value starts
// from 100, and the daily change is random from -5 to 5.
rantable.setHLOCCols(1, 100, -5, 5);

// Set the 6th column as the vol data from 5 to 25 million
rantable.setCol(5, 50000000, 250000000);

// Now we read the data from the table into arrays
double[] timeStamps = rantable.getCol(0);
double[] highData = rantable.getCol(1);
double[] lowData = rantable.getCol(2);
double[] openData = rantable.getCol(3);
double[] closeData = rantable.getCol(4);
double[] volData = rantable.getCol(5);

// Create a FinanceChart object of width 640 pixels
FinanceChart c = new FinanceChart(640);

// Add a title to the chart
c.addTitle("Finance Chart Demonstration");

// Set the data into the finance chart object
c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays);

// Add a slow stochastic chart (75 pixels high) with %K = 14 and %D = 3
c.addSlowStochastic(75, 14, 3, 0x006060, 0x606000);

// Add the main chart with 240 pixels in height
c.addMainChart(240);

// Add a 10 period simple moving average to the main chart, using brown color
c.addSimpleMovingAvg(10, 0x663300);

// Add a 20 period simple moving average to the main chart, using purple color
c.addSimpleMovingAvg(20, 0x9900ff);

// Add candlestick symbols to the main chart, using green/red for up/down days
c.addCandleStick(0x00ff00, 0xff0000);

// Add 20 days donchian channel to the main chart, using light blue (9999ff) as the border and
// semi-transparent blue (c06666ff) as the fill color
c.addDonchianChannel(20, 0x9999ff, 0xc06666ff);

// Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using green/red/grey for
// up/down/flat days
c.addVolBars(75, 0x99ff99, 0xff9999, 0x808080);

// Append a MACD(26, 12) indicator chart (75 pixels high) after the main chart, using 9 days for
// computing divergence.
c.addMACD(75, 26, 12, 9, 0x0000ff, 0xff00ff, 0x008000);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Finance Chart (2)&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Finance Chart (2)
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
